<template>
  <cloudPage>
    <cloudHeader slot="gHeader" background="rgba(0,0,0,0)">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view class="grace-header-icons grace-icons" style="color: #000"></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center font-32"
          style="color: #000"
        ></view>
        <!-- 右侧按钮 -->
        <view
          class="icons"
          style="font-size: 38rpx; position: relative"
          v-if="i18n"
          @tap.stop="languageShow = true"
        >
          <cloudIcon
            name="icondongtai"
            style="font-size: 42rpx; color: rgb(100, 130, 245)"
          ></cloudIcon>
          <gracePopupMenu
            @hideMenu="hideMenu"
            ref="gracePopupMenu"
            :show="languageShow"
            :top="30"
            bgColor="#000"
          >
            <view class="langauge_box">
              <block v-for="(item, index) in locales" :key="index">
                <view
                  class="menus"
                  @tap.stop="onTapSwitchLang(item.value)"
                  :data-id="index"
                  >{{ item.title }}</view
                >
              </block>
            </view>
          </gracePopupMenu>
        </view>
      </view>
    </cloudHeader>
    <view class="container">
      <image src="/static/login/logo.png" class="login_logo" />
      <view class="login_box" :style="{ top: top + 330 + 'rpx' }">
        <!-- nav切换 -->
        <view class="nav_item">
          <graceNavBar
            :items="loginNav"
            :animatie="false"
            textAlign="center"
            activeDirection="center"
            :currentIndex="navIndex"
            @change="navChange"
            activeFontSize="28rpx"
            :margin="120"
            color="rgba(255,255,255,0.8)"
            activeColor="#fff"
            activeLineBg="linear-gradient(270deg, #FEECBF 0%, #FFDB86 100%)"
            :size="200"
          ></graceNavBar>
        </view>
        <!-- 手机号登录 -->
        <view class="mobile_box" v-if="navIndex == 0">
          <view class="input_box flex">
            <image src="/static/auth/login/mobile.png" />
            <view class="sms">
              <image
                :src="`/static/mf/flag/${select.type}.png`"
                class="flag"
                @tap.stop="show = true"
              />
              <image src="/static/auth/login/down_arrow.png" />
              <view class="relative">
                <gracePopupMenu
                  :show="show"
                  @hideMenu="hideMenu2"
                  bgColor="#000"
                  :top="10"
                  arrowDirection="center"
                >
                  <view class="flag_box">
                    <block v-for="(item, index) in selectList" :key="index">
                      <view class="flag_list flex" @tap.stop="selectFlag(item)">
                        <image
                          :src="`/static/mf/flag/${item.type}.png`"
                          class="flag"
                        />
                        <view>{{ item.name }}</view>
                      </view>
                    </block>
                  </view>
                </gracePopupMenu>
              </view>
            </view>

            <input
              type="number"
              class="input_number flex1"
              :placeholder="$t('mf.auth.input_mobile')"
              placeholder-style="color: rgba(255,255,255,0.6);"
              v-model="mobile_form.username"
            />
          </view>
          <view class="input_box flex">
            <image
              src="/static/auth/login/password.png"
              style="width: 42rpx; height: 47rpx"
            />
            <input
              type="password"
              class="input_number flex1"
              :placeholder="$t('mf.auth.input_password')"
              placeholder-style="color: rgba(255,255,255,0.6);"
              v-model="mobile_form.password"
            />
          </view>
        </view>
        <!-- 邮箱登录 -->
        <view class="email_box" v-if="navIndex == 1">
          <view class="input_box flex">
            <image
              src="/static/auth/login/email.png"
              style="width: 42rpx; height: 47rpx"
            />
            <input
              type="text"
              class="input_number flex1"
              :placeholder="$t('mf.auth.input_email')"
              placeholder-style="color: rgba(255,255,255,0.6);"
              v-model="email_form.username"
            />
          </view>
          <view class="input_box flex">
            <image
              src="/static/auth/login/password.png"
              style="width: 42rpx; height: 47rpx"
            />
            <input
              type="password"
              class="input_number flex1"
              :placeholder="$t('mf.auth.input_password')"
              placeholder-style="color: rgba(255,255,255,0.6);"
              v-model="email_form.password"
            />
          </view>
        </view>
        <!-- 忘记密码 -->
        <view
          class="forget"
          @tap.stop="handleNavTo({ url: '/pages/auth/forget' })"
          >{{ $t("common.operate.forget") }}</view
        >
        <!-- 登录按钮 -->
        <button
          class="login_btn"
          @tap.stop="loginNow"
          :loading="loading['user.login']"
        >
          {{ $t("account.login.title") }}
        </button>
        <!-- 注册账号 -->
        <view class="other_title flex">
          <view class="flex1 line"></view>
          <view class="other_title_text">{{ $t("new.other") }}</view>
          <view class="flex1 line"></view>
        </view>
        <view class="other_res">
          <image
            src="/static/auth/login/google.png"
            class="other_img"
            style="margin-right: 56rpx"
          />
          <image src="/static/auth/login/facebook.png" class="other_img" />
        </view>
        <view class="register"
          >{{ $t("new.no_username") }}
          <text
            style="color: #ffdb86"
            @tap.stop="handleNavTo({ url: '/pages/auth/register2' })"
            >{{ $t("account.login.register") }}</text
          >
        </view>
      </view>
    </view>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
const graceChecker = require("@/graceUI/jsTools/graceChecker.js");
export default {
  data() {
    return {
      navIndex: 0,
      mobile_form: {
        username: null,
        password: null,
      },
      email_form: {
        username: null,
        password: null,
      },
      languageShow: false,
      select: {
        type: "us",
        name: "美国",
      },
      show: false,
    };
  },
  computed: {
    ...mapGetters("system", ["locales"]),
    ...mapGetters({ currentLocale: "system/locale" }),
    ...mapGetters("system", ["i18n"]),
    loginNav() {
      return [this.$t("mf.auth.mobile_login"), this.$t("mf.auth.email_login")];
    },
    selectList() {
      return [
        {
          type: "cn",
          name: this.$t("flag.cn"),
        },
        {
          type: "us",
          name: this.$t("flag.us"),
        },
        {
          type: "uk",
          name: this.$t("flag.uk"),
        },
        {
          type: "rs",
          name: this.$t("flag.rs"),
        },
        {
          type: "sk",
          name: this.$t("flag.sk"),
        },
        {
          type: "jp",
          name: this.$t("flag.jp"),
        },
        {
          type: "vn",
          name: this.$t("flag.vn"),
        },
      ];
    },
  },
  methods: {
    ...mapActions("user", ["login"]),
    ...mapActions("system", ["switchLocale"]),
    hideMenu() {
      this.languageShow = false;
    },
    hideMenu2() {
      this.show = false;
    },
    onTapSwitchLang(locale) {
      this.switchLocale({ locale });
      this.setTabBarLang({ locale: locale });
      this.hideMenu();
    },
    navChange(index) {
      this.navIndex = index;
    },
    async loginNow() {
      if (this.navIndex == 0) {
        console.log("??");
        // 表单验证
        var rule = [
          {
            name: "username",
            checkType: "phoneno",
            errorMsg: this.$t("account.tips.mobile_not_right"),
          },
          {
            name: "password",
            checkType: "string",
            checkRule: "1,18",
            errorMsg: this.$t("account.tips.password_not_null"),
          },
        ];
        var checkRes = graceChecker.check(this.mobile_form, rule);
        // 验证通过
        if (checkRes) {
          // 手机登录接口
          await this.login(this.mobile_form);
          this.handleNavTo(this.$config.index);
        } else {
          this.makeToast({ title: graceChecker.error });
        }
      } else if (this.navIndex == 1) {
        console.log(this.email_form);
        // 表单验证
        var rule = [
          {
            name: "username",
            checkType: "email",
            errorMsg: this.$t("account.tips.mail_not_right"),
          },
          {
            name: "password",
            checkType: "string",
            checkRule: "1,18",
            errorMsg: this.$t("account.tips.password_not_null"),
          },
        ];
        var checkRes = graceChecker.check(this.email_form, rule);
        // 验证通过
        if (checkRes) {
          // 邮箱登录接口
          await this.login(this.email_form);
          this.handleNavTo(this.$config.index);
        } else {
          this.makeToast({ title: graceChecker.error });
        }
      }
    },
    selectFlag(item) {
      this.show = false;
      this.select = item;
    },
  },
  onLoad() {
    this.setTabBarLang({ locale: this.currentLocale });
  },
};
</script>

<style scoped>
.container {
  /* background-image: url("/static/loginBG.png"); */
  width: 100%;
  /* padding-top: 480rpx; */
}
.login_logo {
  width: 188rpx;
  height: 226rpx;
  position: relative;
  top: 27rpx;
  left: 50%;
  transform: translateX(-50%);
}
.login_box {
  width: 100%;
  position: absolute;
  top: 330rpx;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 60rpx 60rpx 0px 0px;
  padding: 60rpx;
  box-sizing: border-box;
}
.nav_item {
  box-sizing: border-box;
  padding-left: 80rpx;
  margin-bottom: 80rpx;
}
.input_box {
  width: 100%;
  height: 96rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 24rpx;
  margin-bottom: 39rpx;
  align-items: center;
  padding: 0 50rpx;
  box-sizing: border-box;
}
.input_box image {
  height: 48rpx;
  width: 32rpx;
  margin-right: 20rpx;
}
.sms {
  display: flex;
  align-items: center;
  position: relative;
}
.sms .flag {
  width: 52rpx;
  height: 33rpx;
}
.sms image {
  width: 30rpx;
  height: 30rpx;
}
.input_number {
  height: 98rpx;
  line-height: 98rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  padding: 0 20rpx;
  color: #fff;
}
.forget {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffdb86;
  line-height: 45rpx;
  text-align: right;
  margin-bottom: 65rpx;
}
.login_btn {
  text-align: center;
  line-height: 100rpx;
  width: 100%;
  height: 100rpx;
  background-image: url("/static/auth/login/btn_bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 55rpx;
  font-size: 34rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #2b2c3e;
  margin-bottom: 60rpx;
}
.register {
  height: 45rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Light, PingFang SC;
  font-weight: 300;
  color: rgba(249, 249, 251, 0.3);
  line-height: 45rpx;
  text-align: center;
}
.langauge_box {
  background-color: #000;
}
.other_title {
  width: 100%;
  height: 36rpx;
  align-items: center;
  margin-bottom: 26rpx;
}
.other_title .line {
  height: 2rpx;
  background-color: rgba(255, 255, 255, 0.6);
}
.other_title_text {
  width: 210rpx;
  text-align: center;
  height: 36rpx;
  font-size: 26rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  line-height: 36rpx;
}
.other_res {
  width: 100%;
  text-align: center;
  margin-bottom: 25rpx;
}
.other_img {
  width: 96rpx;
  height: 96rpx;
}
.flag_box {
  width: 173rpx;
  min-height: 470rpx;
  padding: 32rpx 32rpx;
}
.relative {
  position: relative;
  left: 100rpx;
}
.flag_list {
  height: 80rpx;
  width: 100%;
  align-items: center;
  color: #fff;
}
</style>